<template>
  <div class="cake">
    <div class="loving">
      <!-- <div class="deadline">|&nbsp;爱情鲜花</div> -->
      <div class="block" v-for="item in cakesArray" :key="item.cakeId">
        <!-- <span class="demonstration">{{ fit }}</span> -->

        <el-image style="width: 300px; height: 300px; display: block" :src="item.cakeImg" @click="toDetail(item.cakeId)">
        </el-image>

        {{ item.cakeName }}
        <p class="price">￥{{ item.cakePrice }}</p>
      </div>

    </div>
    <div class="block">

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="this.pageQuery.pageNo" :page-sizes="[6, 12, 18, 24]" :page-size="this.pageQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { getCake } from '@/api/cake'
export default {
  data() {
    return {
      total: 1,
      pageQuery: {
        pageNo: 1,
        pageSize: 12,
      },
      cakesArray: [

      ],
    };
  },
  methods: {
    toDetail(cakeId) {
      this.$router.push({ path: '/cakedetails', query: { cakeId } }).catch(err => err)

    },

    init() {
      getCake(this.pageQuery)
        .then(res => {

          this.cakesArray = res.data.records
          this.total = res.data.total

        })
        .catch(() => {

        })
    },
    handleSizeChange(val) {
            this.pageQuery.pageSize = val
            this.init();

        },
        handleCurrentChange(val) {
            this.pageQuery.pageNo = val
            this.init();
        }
  },

  mounted() {
    this.init();
  }

};
</script>
  
<style lang="scss">
.cake {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  // background-color: #f5f5f5;

  .loving {
    width: 80%;
    margin: auto;
    background-color: #f5f5f5;
    display: flex;
    flex-wrap: wrap;

    .deadline {
      padding-top: 10px;

      text-align: left;
      color: #8f633c;
      font-size: 24px;
      width: 80%;
      // border: 1px solid black;
    }

    .block {
      overflow: hidden; //图片超出div部分隐藏
      margin-top: 15px;
      padding: 10px;
      margin-left: 45px;
      background-color: #ffffff;
      display: inline-block;
      // border: 1px solid black;
      // float: left;

      transition: all 0.6s; //设置动画执行的时间为0.6s
      cursor: pointer;


      .price {
        color: red;
        font-size: 24px;
      }
    }

    .block:hover {
      transform: scale(1.05); //设置图片按照比例放大1.3倍
    }

    //  border: 1px solid black;
  }
}
</style>